<template>
  <div id="banner" @mouseover="showset" @mouseout="hideset">
    <div class="nav clearfix">
      <div class="centerBox clearfix">
        <div class="logo">
          <img :src="logoimg">
        </div>
        <a class="navButton" :href="personalCenter">个人中心</a>
        <div class="navButton active">活动内容</div>
      </div>
    </div>
    <div class="header" :style="{backgroundImage: backurl}">
      <div class="banner_con" :style="{visibility:ifhidden,color:bandata.fontcolor}">
        <div class="information">
          <div class="name">{{taskdata.ActivityTitle}}</div>
          <div class="timeadress">
            <div class="time">
              <i class="iconfont icon-activity_fill"></i>
              <span> 时间 </span> {{taskdata.StartTime}} ~ {{taskdata.EndTime}} </div>
            <div class="adress">
              <i class="iconfont icon-coordinates_fill"></i>
              <span> 地址 </span> {{taskdata.FullAddress}}</div>
          </div>
          <div class="or" v-show="taskdata.Sponsor.length&&taskdata.Sponsor[0].Name!=''">
            <i>活动由</i>
            <span v-for="(item,index) in taskdata.Sponsor" class="zhuban"> {{index==0?"":"、" }} {{ item.Name }} </span>
            <i>主办</i>
          </div>
          <div class="CutOffTime" v-show="taskdata.CutOffTime">
            <i> 报名截止 </i>
            <span> {{taskdata.CutOffTime}} </span>
          </div>
          <div class="attend">
            <a :href="signUp" class="btn" :style="{color:bandata.fontcolor,borderColor:bandata.fontcolor}">{{btnName}}</a>
          </div>
        </div>
        <div class="e_frametop"></div>
        <div class="e_framebottom"></div>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset" style="right:30px">设置</div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    props: ["taskdata"],
    data: function () {
      return {
        maskshow: false
      }
    },
    computed: {
      ...mapState([
        "pageConfig",
        "parameters"
      ]),
      bandata(){
        return this.pageConfig[this.pageConfig.theme];
      },
      ifhidden: function () {
        return this.bandata.type == 1 ? 'visible' : 'hidden'
      },
      backurl: function () {
        return 'url(' + this.bandata.background + ')'
      },
      personalCenter: function () {
        return "/Event/Registration/RegisterCertificate?_taskId_=" + this.taskdata.TaskId
      },
      signUp: function () {
        if (this.taskdata.IsEventOver || this.taskdata.IsEnd) {
          return 'javascript:;';
        } else {
          if (this.taskdata.Mode == 2) {
            return "/Event/Registration/FillInfo?_taskId_=" + this.taskdata.TaskId;
          } else if (this.taskdata.Mode == 1) {
            return "#Tickettype";
          }
        }
      },
      btnName: function () {
        if (this.taskdata.IsEventOver) {
          return "活动结束"
        } else {
          if (this.taskdata.IsEnd) {
            return "报名截止"
          } else {
            return "我要报名"
          }
        }
      },
      logoimg: function () {
        if (this.bandata.LogoSrc) {
          return this.bandata.LogoSrc;
        } else if (this.taskdata.Sponsor.length) {
          return this.taskdata.Sponsor[0].LogoSrc;
        } else {
          return "";
        }
      }
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$store.commit({
          type: 'showsetbox',
          setMod: 'Setbanner',
          index: -1
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .nav {
    height: 62px;
    background: #fff;
    .centerBox {
      max-width: 1100px;
      margin: 0 auto;
      .logo {
        height: 100%;
        box-sizing: border-box;
        padding: 10px 0 15px;
        float: left;
        img {
          height: 37px;
        }
      }
      .navButton {
        float: right;
        line-height: 60px;
        font-size: 14px;
        padding: 0 20px;
        cursor: pointer;
      }
      .active {
        color: #ff5304;
        box-sizing: border-box;
        border-bottom: 2px solid #ff5304;
      }
    }
  }
</style>